<template>
  <div class="index">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="个人信息" name="playerInfo">
        <div class="userinfo">
          <div>
            <div class="input-suffix">
              <span>姓名：</span>
              <el-input placeholder="请输入您的姓名" suffix-icon="el-icon-edit el-input__icon" v-model="user_info.name"
                clearable size="small" style="width: 220px;"></el-input>
            </div>
            <div class="input-suffix">
              <span>证件号：</span>
              <el-input placeholder="请输入证件号" suffix-icon="el-icon-edit el-input__icon" v-model="user_info.id_card"
                clearable size="small" style="width: 220px;"></el-input>
            </div>
            <div class="input-suffix">
              <span>证件类型：</span>
              <el-select v-model="user_info.card_type" placeholder="请选择" size="small" style="width: 220px;">
                <el-option v-for="item in actions" :key="item.type" :label="item.name" :value="item.type"></el-option>
              </el-select>
            </div>
            <div class="input-suffix">
              <span>手机号：</span>
              <el-input placeholder="请输入手机号" suffix-icon="el-icon-edit el-input__icon" v-model.number="user_info.phone"
                clearable size="small" style="width: 220px;"></el-input>
            </div>
            <div class="input-suffix">
              <span>出生年月：</span>
              <el-date-picker v-model="user_info.date_of_birth" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                size="small"></el-date-picker>
            </div>
            <div class="input-suffix">
              <span>身高：</span>
              <el-input placeholder="请输入身高" suffix-icon="el-icon-edit el-input__icon" v-model="user_info.height"
                clearable size="small" style="width: 220px;">
                <template slot="append">cm</template>
              </el-input>
            </div>
            <div class="input-suffix">
              <span>体重：</span>
              <el-input placeholder="请输入体重" suffix-icon="el-icon-edit el-input__icon" v-model="user_info.weight"
                clearable size="small" style="width: 220px;">
                <template slot="append">kg</template>
              </el-input>
            </div>
            <div class="input-suffix">
              <span>持拍方式：</span>
              <el-select v-model="user_info.pat" placeholder="请选择" size="small" style="width: 220px;">
                <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
          </div>
          <div class="parent-img">
            <el-upload class="avatar-uploader" :action="actionFile" :show-file-list="false" :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="user_info.img" :src="user_info.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="back">
          <el-button type="success" @click="submitUserInfo">提交</el-button>
          <!-- <el-button @click="back">返回</el-button> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="参赛信息" name="competitioninfo">
        <div v-if="show_competition_info">
          <div class="matchList">
            <div class="matchLists" v-for="(itme, index) in MatchShowList" :key="index">
              <div class="left">
                <img :src="itme.logo" alt />
                <div>
                  <p class="title">{{itme.com_name}}</p>
                  <p>
                    <span>主办单位：</span>
                    {{itme.host}}
                  </p>
                  <p>
                    <span>比赛开始时间</span>
                    {{itme.start_time}}
                  </p>
                </div>
              </div>
              <div class="right">
                <p class="status" :class="{'og': itme.status==2 || itme.status==3, 'os': itme.status==4, 'od': itme.status==5}">
                  <span v-if="itme.status==2">未发布</span>
                  <span v-if="itme.status==3">未发布</span>
                  <span v-if="itme.status==4">已发布</span>
                  <span v-if="itme.status==5">已结束</span>
                </p>
                <p class="checkdetails" @click="checkdetails(itme.id, itme.project_id)">查看详情>></p>
              </div>
            </div>
          </div>
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;"></el-pagination>
        </div>
        <div v-else>
          <div class="match-apply-title">
            赛事报名：{{com_info.name}}
            <el-button @click="backMatchApply" style="border:none;padding:0;padding-right:20px">
              <img width="25" src="http://qncdn.tissys.com/admin/assets/image/back.png" alt />
            </el-button>
          </div>
          <div class="match-apply-info">
            <p class="match-info">
              <span>主办单位：{{com_info.host}}</span>
              <span>承办单位：{{com_info.assist}}</span>
            </p>
            <p class="match-info">
              <span>比赛地点：{{com_info.address}}</span>
              <span>赛事联络人：{{com_info.major}}</span>
            </p>
            <p class="match-info">
              <span>报名截止时间：{{com_info.end_time}}</span>
              <span>比赛开始时间：{{com_info.start_time}}</span>
            </p>
          </div>
          <div class="group_list">
            <el-radio-group v-model="group_list_current" @change="changeGroupList">
              <el-radio-button :label="item.id" v-for="(item, index) in group_list" :key="index">{{item.group}}{{item.type}}【{{item.com_type_name}}】</el-radio-button>
            </el-radio-group>
          </div>
          <div style="display: flex;">
            <el-button size="small" type="primary" plain>详细成绩</el-button>
            <el-button size="small" plain style="margin-left: 0;" @click="allGrade">全部成绩</el-button>
          </div>
          <el-table :data="attend_com_detail_t" stripe :default-sort="{ prop: 'match_date', order: 'descending' }">
            <el-table-column prop="self" label="姓名"></el-table-column>
            <el-table-column prop="match_date" label="比赛日期" sortable></el-table-column>
            <el-table-column prop="wheel" label="轮次" width="180px">
              <template slot-scope="scope">
                <!-- 循环+淘汰  循环+循环 -->
                <div v-if="scope.row.com_system_type != 3 && scope.row.com_system_type != 5 && scope.row.com_system_type != 2">第{{ scope.row.stage }}阶段
                  <span v-if="scope.row.stage == 1 || scope.row.com_system_type == 4">第{{ scope.row.wheel }}轮</span>
                  <span v-if="scope.row.stage == 2 && scope.row.com_system_type == 1">{{ scope.row | wheelName }}</span>
                </div>
                <!-- 预选赛 -->
                <div v-else-if="scope.row.com_system_type == 5">{{ scope.row.second_order + 1 }}区 {{ scope.row | wheelName }}</div>
                <!-- 单循环 -->
                <div v-else-if="scope.row.com_system_type == 2">第{{ scope.row.wheel }}轮</div>
                <!-- 单淘汰 -->
                <div v-else>
                  <span>{{ scope.row | wheelName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ref_name" label="裁判"></el-table-column>
            <el-table-column prop="match_time" label="比赛用时"></el-table-column>
            <el-table-column prop="rival" label="对手"></el-table-column>
            <el-table-column prop="score" label="比分"></el-table-column>
            <el-table-column prop label="胜负">
              <template slot-scope="scope">
                <span :class="{winter: scope.row.outcome == '胜',fail: scope.row.outcome == '负'}">{{scope.row.outcome}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="技术统计" name="count">
        <div class="pane-count">
          <div class="demo-input-suffix">
            时间：
            <el-date-picker v-model="startTime" type="date" placeholder="开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              size="small"></el-date-picker>
            <span>-</span>
            <el-date-picker v-model="endTime" type="date" placeholder="截止时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              size="small"></el-date-picker>
            <el-button size="small" style="margin-left: 30px;" @click="conformTime">确定</el-button>
          </div>
          <div class="count">
            <count-player :aces_a="playerArr" :shows="showplayer"></count-player>
            <echarts-player :aces_a="playerArr" :shows="showplayer"></echarts-player>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="back" style="position: absolute;right: 0;top: 0;">返回</el-button>
  </div>
</template>

<script>
  import countPlayer from "../components/count";
  import echartsPlayer from "../components/echarts";
  import schedule from "@/utils/schedule.js";
  export default {
    components: {
      countPlayer,
      echartsPlayer
    },
    data() {
      return {
        activeName: this.$route.query.playerIdTab,
        user_info: {},
        total: null,
        currentPage: 0,
        MatchShowList: [],
        startTime: null,
        endTime: null,
        actions: [{
            name: "身份证",
            type: 0
          },
          {
            name: "护照",
            type: 1
          }
        ],
        options: [{
            name: "右手持拍-单手反拍"
          },
          {
            name: "右手持拍-双手反拍"
          },
          {
            name: "左手持拍-单手反拍"
          },
          {
            name: "左手持拍-双手反拍"
          },
          {
            name: "双正双反"
          }
        ],
        imageUrl: "",
        show_competition_info: true,
        attend_com_detail_t: [],
        com_info: {},
        group_list: [],
        group_list_current: 0,
        checkdetails_id: "",
        playerArr: {},
        showplayer: null
      };
    },
    computed: {
      actionFile() {
        return `${this.$axios.defaults.baseURL}/event/file`;
      },
      getCurrentDate() {
        let date = new Date();
        let getYear = date.getFullYear();
        let getMonth = date.getMonth() + 1;
        let getDate = date.getDate();
        if (getMonth < 10) getMonth = `0${getMonth}`;
        if (getDate < 10) getDate = `0${getDate}`;
        let toDay = `${getYear}-${getMonth}-${getDate}`;
        return toDay;
      },
      getAfterYearDate() {
        let date = new Date();
        let getYear = date.getFullYear() - 1;
        let getMonth = date.getMonth() + 1;
        let getDate = date.getDate();
        if (getMonth < 10) getMonth = `0${getMonth}`;
        if (getDate < 10) getDate = `0${getDate}`;
        let toDay = `${getYear}-${getMonth}-${getDate}`;
        return toDay;
      }
    },
    created() {
      this.get_compe_info();
      this.startTime = this.getAfterYearDate;
      this.endTime = this.getCurrentDate;
    },
    mounted() {
      this.conformTime();
    },
    filters: {
      wheelName: battle => {
        return schedule.wheelName(battle);
      }
    },
    methods: {
      allGrade() {
        this.$router.push({
          // path: "/Index/Match/scoreList",
          path: "/Index/Match/LayoutResult",
          query: {
            MatchId: this.checkdetails_id,
            group_id: this.group_list_current
          }
        });
      },
      backMatchApply() {
        this.show_competition_info = true;
      },
      changeGroupList(val) {
        this.checkdetails(this.checkdetails_id, val);
      },
      submitUserInfo() {
        this.$axios
          .post(
            "/UserManage/edit_player_info", {
              user_id: this.$route.query.playerId,
              name: this.user_info.name,
              img: this.user_info.img,
              card_type: this.user_info.card_type,
              id_card: this.user_info.id_card,
              date_of_birth: this.user_info.date_of_birth,
              height: this.user_info.height,
              weight: this.user_info.weight,
              pat: this.user_info.pat,
              phone: this.user_info.phone
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            if (res.data.code == 2000) {
              this.$message({
                type: "success",
                message: res.data.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      checked() {
        console.log(this.user_info);
      },
      handleAvatarSuccess(res, file) {
        this.user_info.img = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!/^image\/(jpeg|png|jpg|bmp|gif|jpg)$/.test(isJPG)) {
          this.$message.error("上传头像图片格式不正确!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      handleClick(tab, event) {
        this.$router.push({
          path: "/Index/User/playerIndex",
          query: {
            playerId: this.$route.query.playerId,
            playerIdTab: tab.name
          }
        });
      },
      get_compe_info() {
        let promise = new Promise((resolve, reject) => {
          this.$axios
            .get("/UserManage/user_info", {
              params: {
                user_id: this.$route.query.playerId
              },
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            })
            .then(res => {
              if (res.data.code == 2000) {
                resolve(res.data.data);
              }
            })
            .catch(error => {
              console.log(error);
            });
        });
        promise
          .then(res => {
            this.user_info = res;
            return this.get_allclub();
          })
          .then(res => {
            this.total = 1;
            this.MatchShowList = res;
          });
      },
      back() {
        this.$router.push({
          path: "/Index/User/playerList"
        });
      },
      get_allclub() {
        let promise = new Promise((resolve, reject) => {
          this.$axios
            .post(
              "/UserManage/attend_com_info", {
                search: "",
                club_id: 2,
                status: "",
                page: this.currentPage,
                user_id: this.$route.query.playerId
              }, {
                headers: {
                  token: window.sessionStorage.getItem("token")
                }
              }
            )
            .then(res => {
              if (res.data.code == 2000 || res.data.code == 2001) {
                resolve(res.data.data);
              }
            })
            .catch(error => {
              console.log(error);
            });
        });
        return promise;
      },
      ChangePage(page) {
        this.currentPage = parseInt(page) - 1;
        this.MatchShowList = this.tableData.slice(
          (page - 1) * 10,
          (page - 1) * 10 + 10
        );
      },
      checkdetails(id, group_id) {
        this.checkdetails_id = id;
        this.$axios
          .post(
            "/UserManage/attend_com_detail", {
              com_id: id,
              group_id: group_id,
              user_id: this.$route.query.playerId
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data;
            if (code == 2000) {
              this.attend_com_detail_t = data.list;
              this.group_list = data.group_list;
              this.group_list_current = data.group_id;
              this.com_info = data.com_info;
              this.show_competition_info = false;
            }
          })
          .catch(error => {});
      },
      conformTime() {
        this.$axios
          .post(
            "UserManage/skill_stat", {
              start_time: this.startTime,
              end_time: this.endTime,
              user_id_a: this.$route.query.playerId,
              type: 0
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data;
            if (code == 2000) {
              this.playerArr = data;
              this.showplayer = true;
            } else {
              this.showplayer = false;
            }
          })
          .catch(error => {});
      }
    }
  };
</script>

<style lang="less" scoped>
  .input-suffix span {
    display: inline-block;
    width: 100px;
    text-align: right;
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .input-suffix {
    margin-bottom: 30px;
  }

  .count {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .id_card {
    margin-left: 50px;
  }

  .pane-count {
    margin-left: 50px;
    margin-top: 5px;
  }

  .back {
    text-align: center;
    margin-top: 100px;
  }

  .userinfo {
    display: flex;

    p {
      margin-bottom: 30px;
    }

    .parent-img {
      // margin-left: 300px;
      margin-left: 25%;

      .img {
        width: 115px;
        height: 143px;
        display: inline-block;
        border: 1px #ccc solid;
        border-radius: 4px;
        padding: 10px;
      }
    }
  }

  .count {
    display: flex;
  }

  .index {
    width: 90%;
    margin-left: 53px;
    margin-top: 20px;
    position: relative;
  }

  .matchList {
    margin-left: 40px;
    margin-right: 100px;

    .matchLists {
      display: flex;
      justify-content: space-between;
      border: 1px #dcdfe6 dotted;
      margin-bottom: 20px;
      padding: 10px;

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
          margin: 10px 0;
        }

        img {
          display: inline-block;
          width: 78px;
          height: 70px;
          margin-right: 15px;
        }

        .title {
          font-weight: bold;
        }
      }

      .right {
        margin-right: 56px;

        .status {
          margin-bottom: 46px;
        }

        .checkdetails {
          cursor: pointer;
        }
      }
    }
  }

  .match-apply-title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }

  .match-apply-info {
    border-bottom: 1px solid #ccc;
  }

  .match-info {
    margin-bottom: 15px;

    span {
      display: inline-block;
      width: 400px;
    }
  }

  .group_list {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .winter {
    color: rgb(37, 155, 36);
  }

  .fail {
    color: rgb(229, 28, 35);
  }

  .og {
    border: 1px #ff8200 solid;
    color: #ff8200;
    text-align: center;
  }

  .os {
    border: 1px #ffbd00 solid;
    color: #ffbd00;
    text-align: center;
  }

  .od {
    border: 1px #579c00 solid;
    color: #579c00;
    text-align: center;
  }
</style>
